<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //反复点击会报避免重复导航到当前位置的错误
        //vue-router.esm.js:1993 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/search".

        //报错呈现的过程,push返回一个promise,失败的promise会返回错误信息
        // const p1 = new Promise((resolve, reject) => {
        //     setTimeout(() => {
        //         reject("vue-router.esm.js:1993 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: '/search'.")
        //     },2000)
        // })

        //模拟重写push,push在VueRouter的原型对象上,$router是VueRouter的实例,所以可以用
        //push接收三个参数,如果不给onComplete和onAbort传实参,则他俩默认是undefined
        //不传参的情况下,then和catch中没有处理成功或失败状态promise的回调函数,默认穿透
        //如果给onComplete和onAbort传一个回调函数,则会唤醒相关功能
        function push(location, onComplete, onAbort) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                reject(
                    "NavigationDuplicated: Avoided redundant navigation to current location: '/search'."
                )
            }, 2000)
            })
            .then(onComplete)
            .catch(onAbort)
        }

        function myPush(a, onComplete = () => {}, onAbort = ()=> {}){
            return push(a, onComplete, onAbort)
        }

        myPush("123")
    </script>
</body>

</html>